<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bookstrap排版样式</title>
    <link rel="stylesheet" href="..\bootstrap-3.3.7-dist\css\bootstrap.min.css">
    <style>
        .a{
            height: 50px;
            width: 190px;
            border: 1px solid #ccc;
            background-color: #eee;
        }
    </style>
</head>

<body style="margin: 50px;">

    <!-- 情景文本颜色 -->
    <p class="text-muted">Bootstrap视频</p>
    <p class="text-warning">Bootstrap视频</p>
    <p class="text-danger">Bootstrap视频</p>
    <p class="text-primary">Bootstrap视频</p>
    <p class="text-success">Bootstrap视频</p>

    <!-- 背景颜色 -->
    <p class="bg-info">Bootstrap视频</p>
    <p class="bg-warning">Bootstrap视频</p>
    <p class="bg-danger">Bootstrap视频</p>
    
    <!-- 关闭按钮 -->
    <button class="close">&times;</button>

    <!-- 三角符号  -->
    <span class="caret"></span>

    <br />
    <!-- 快速浮动 -->
    <div class="pull-left a">左浮动</div>
    <div class="pull-right a">右浮动</div>

    <br/>
    <br/>
    <br/>
    <!-- 块级居中 -->
    <div class="center-block a">居中</div>

    <br/>
    <br/>
    <br/>    
    <div class="pull-left a">左边</div>    
    <!-- 清除浮动 -->
    <div class="clearfix"></div>
    <div class="a">右边</div>
    

    <!-- 超小屏激活显示  对于显示的内容 有三种方式 block,inline-block,inline -->
    <!-- 根据屏幕大小适应 -->
    <div class="visible-xs-inline a">超小屏激活显示</div>
    <br/>>
    <div class="hidden-xs a">超小屏激活隐藏</div>


    <script src="..\bootstrap-3.3.7-dist\js\jquery-3.2.1.min.js"></script>
    <script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
</body>
</html>